import * as React from 'react';
import * as _ from 'lodash';
import FormRender from '@/plugins/form/form-render';
import { createForm } from '@/components/rc-form';
import { Card as AntCard } from 'antd-mobile-v2';
import styles from './index.module.less';
import { optionsWidth } from '../type';

class DetailView extends React.Component<any, any> {
  public componentDidMount() {
    if (this.props.form && this.props.value) {
      this.props.form.setFieldsValue(this.props.value);
    }
  }
  public componentDidUpdate(prevProps: any) {
    if (!_.isEqual(prevProps.value, this.props.value)) {
      this.props.form.setFieldsValue(this.props.value);
    }
  }

  public render() {
    const {
      index,
      title,
      componentClasses,
      childTemplate,
      value,
      form,
      renderMode,
      len,
      layout,
      allDisabled
    } = this.props;

    const delButtonList =
      len > 1 &&
        renderMode !== 'detail' &&
        renderMode !== 'actionEditable' &&
        !allDisabled &&
        !value?.disabled &&
        !value?.hideDelBtn ? (
          <span
            className={styles.delBtn}
            onClick={this.props.onDelete.bind(this, index)}
          >
            删除
          </span>
        ) : null;

    const titleList = (
      <span className={styles.titleText}>
        {title + (len > 1 ? '(' + (index + 1) + ')' : '')}
      </span>
    );
    let width = 0;
    const childs = Object.keys(childTemplate).map((item) => {
      if (childTemplate[item]) {
        return {
          key: childTemplate[item].gaeaKey.split('-')[1],
          permission: childTemplate[item].data?.props?.permission
        };
      }
      return null;
    });

    childs.forEach((item) => {
      if (item?.permission !== 'hide') {
        width += optionsWidth[item?.key] ? optionsWidth[item?.key] : 0;
      }
    });
    // 表格列数
    let tableColumn = 0;
    for (const key in childTemplate) {
      if (
        !childTemplate[key]?.isBasicGroup &&
        !childTemplate[key]?.childs.length
      ) {
        tableColumn++;
      }
    }
    if (tableColumn <= 5) {
      width = 0;
    }

    return (
      <AntCard
        className={
          styles.deCard +
          ' ' +
          (renderMode === 'detail' ? styles.listDetail : '')
        }
        style={{ border: '0' }}
      >
        <AntCard.Header
          title={
            <div
              className={
                styles.cardTile +
                ' ' +
                (renderMode === 'detail' ? styles.detail : '')
              }
            >
              {titleList}
              {delButtonList}
            </div>
          }
        />
        <AntCard.Body id="cardbody">
          {
            <>
              <FormRender
                renderMode={(value?.disabled ? 'detail' : '') || renderMode}
                disabled={value?.disabled || false}
                layout={layout}
                componentClasses={componentClasses}
                value={childTemplate}
                formValues={value}
                form={form}
              />
            </>
          }
        </AntCard.Body>
      </AntCard>
    );
  }
}

export default createForm({
  onValuesChange: (props: any, changed, all) => {
    if (!changed) return;
    let needTriggerChanged = false;
    for (const key in changed) {
      if (!_.isEqual(changed[key], props?.value[key])) {
        needTriggerChanged = true;
      }
    }
    needTriggerChanged &&
      props.onChange &&
      props.onChange(props.index, changed, all);
  }
})(DetailView);
